import React from 'react'
import './index.css'

const MenuItem = (props) => {
  return (<div className="Menu-item">
    <p className={"fa fa-" + props.icon}></p>
    <p>{props.txt}</p>
  </div>)
}

export default class Menu extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      menu: [
        {
          icon: 'home',
          txt: '首页'
        },
        {
          icon: 'quora',
          txt: '发现'
        },
        {
          icon: 'send',
          txt: '消息'
        },
        {
          icon: 'user',
          txt: '我的'
        }
      ]
    }
  }
  render () {
    return (
      <div className="Menu">
        {
          this.state.menu.map((item, index) => {
            return (
              <MenuItem icon={item.icon} txt={item.txt} key={index}></MenuItem>
            )
          })
        }
      </div>
    )
  }
}